<template>
	<el-dialog v-dialogDrag class="abow-dialog" :visible.sync="visible" title="投放链接" :close-on-click-modal="false"
		:close-on-press-escape="false" width="800px">
		<div slot="title" class="dialog-title">
			<el-row>
				<span class="dialog-title-text text-green font-weight" style="font-size: 17px;">{{(name?name+' ':'')}}</span>
				<span class="dialog-title-text">{{(name?'的':'')+'投放链接'}}</span>
			</el-row>
		</div>
		<el-card class="box-card mb-10" shadow="never">
			<div class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">微信小程序链接：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.wx_link" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.wx_link}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.wx_link?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.wx_link)">复制</el-button>
				</div>
			</div>
			
			<div class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">微信小程序路由：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.wx_route" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.wx_route}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.wx_route?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.wx_route)">复制</el-button>
				</div>
			</div>

			<div class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">微信小程序私域路由：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.wx_link_private" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.wx_link_private}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.wx_link_private?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.wx_link_private)">复制</el-button>
				</div>
			</div>
			
			<div class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">抖音小程序：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.dy_link" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.dy_link}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.dy_link?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.dy_link)">复制</el-button>
				</div>
			</div>
			
			<div v-if="dataForm.dy_page" class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">抖音小程序启动页：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.dy_page" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.dy_page}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.dy_page?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.dy_page)">复制</el-button>
				</div>
			</div>
			
			<div v-if="dataForm.dy_parameter" class="d-flex flex-column mb-20">
				<div class="d-flex text item mb-5">抖音小程序参数：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.dy_parameter" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.dy_parameter}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.dy_parameter?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.dy_parameter)">复制</el-button>
				</div>
			</div>

			<div v-if="dataForm.dy_route" class="d-flex flex-column">
				<div class="d-flex text item mb-5">抖音H5链接：</div>
				<div class="d-flex flex-row a-center j-sb">
					<el-link v-if="dataForm.dy_route" class="d-flex j-start mr-20" type="primary" :underline="false">{{dataForm.dy_route}}</el-link>
					<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
					<el-button :disabled="dataForm.dy_route?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
						@click="copyText(dataForm.dy_route)">复制</el-button>
				</div>
			</div>
			
		</el-card>
	</el-dialog>
</template>

<script>
	let that;
	import * as clipboard from 'clipboard-polyfill'
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				name:'',
				dataId: null,
				visible: false,
				dataForm: {
					wx_link: '',
					wx_route: '',
					dy_link:'',
					dy_route:''
				}
			}
		},
		created() {
			that = this;
		},
		computed: {},
		watch: {},
		methods: {
			copyText(text) {
				console.log(text);
				if(!text) {
					return that.$message({message: '数据为空，无法复制！',type: 'error',duration: 1500})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			init() {
				this.visible = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.dataForm.resetFields();
					}, 200)
				})
			},
			update(row) {
				this.visible = true;
				console.log(94,row)
				this.$nextTick(() => {
					let rowData = Object.assign({}, row);
					this.dataForm.wx_link = rowData.wx_link || '';
					this.dataForm.wx_route = rowData.wx_route || '';
					this.dataForm.dy_link = rowData.dy_link || '';
					this.dataForm.dy_page = rowData.dy_page || '';
					this.dataForm.dy_parameter = rowData.dy_parameter || '';
					this.dataForm.dy_route = rowData.dy_route || '';
					this.dataForm.wx_link_private = rowData.wx_link_private || '';
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 580px;
	}
</style>